<script setup>
import { useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

const goBack = () => {
  router.push({
    path: '/order/orders'
  })
}
// const details = route.query.content;
let param = route.query.orderStatus;
if (param == 0) {
  param = "待支付"
} else if (param == 4) {
  param = "待核销"
} else if (param == 1) {
  param = "已完成"
} else if (param == 2) {
  param = "已取消"
} else if (param == 3) {
  param = "已退款"
} else {
  param = "其他";
}

const orderDetails = [
  { label: "订单编号：", value: route.query.orderNum },
  { label: "服务名：", value: route.query.serviceName },
  { label: "核销码：", value: route.query.verifyCode },
  { label: "商家名称：", value: route.query.shopName },
  { label: "买家：", value: route.query.ownerName },
  { label: "订单状态：", value: param },
  { label: "下单时间：", value: route.query.orderTime },
  { label: "预约时间：", value: route.query.appointTime },
  { label: "原价：", value: route.query.yuanjia },
  // { label: "优惠：", value: route.query.orderNum },
  { label: "实付金额：", value: route.query.payPrice },
  { label: "服务内容：", value: route.query.remark }
]
</script>

<template>
  <div class="order-details">
    <el-card>
      <div class="header">
        <span>订单详情</span>
        <el-button type="primary" @click="goBack" style="float: right;">返回</el-button>
      </div>
      <el-table
          :data="orderDetails"
          border
          style="width: 100%; margin-top: 20px;"
          show-header="false"
      >
        <el-table-column prop="label" width="180" />
        <el-table-column prop="value" />
      </el-table>
    </el-card>
  </div>
</template>

<style scoped>
.order-details {
  padding: 30px;
}
.header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  position: relative;
}
</style>